<!-- 忘记密码 -->
<template>
	<view class="forget-content">
		<view class="forget-body">
			<view class="line"></view>
			<view class="forget-mian">
				<view class='form-item'>
					<u-field v-model="queryForm.phone" label=" " type="phone" label-width="0" placeholder="请输入手机号">
						<image slot="icon" class="input-icon" src="../../static/loginIcon/phone.png" mode=""></image>
					</u-field>
				</view>
				<view class='form-item'>
					<u-field v-model="queryForm.sms_code" label=" " type="number" label-width="0" placeholder="请输入验证码">
						<image slot="icon" class="input-icon" src="../../static/loginIcon/code.png" mode=""></image>
						<view style="color: #4286F4;" slot="right" @tap="getCode">{{tips}}</view>
						<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"
							@change="codeChange"></u-verification-code>
					</u-field>
				</view>
				<view class='form-item'>
					<u-field v-model="queryForm.password" label=" " type="password" label-width="0"
						placeholder="请设置登录密码">
						<image slot="icon" class="input-icon" src="../../static/loginIcon/password.png" mode=""></image>
					</u-field>
				</view>
				<view class='form-item'>
					<u-field v-model="queryForm.password_confirmation" label=" " type="password" label-width="0"
						placeholder="请设置登录密码">
						<image slot="icon" class="input-icon" src="../../static/loginIcon/password.png" mode=""></image>
					</u-field>
				</view>
				<view class="submit-btn">
					<u-button shape="circle" :custom-style="customStyle" @click="forgetPWD">确认找回</u-button>
				</view>
				<view class="go-login" @click="gotoLogin">去登录</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCode,
		forgetPWD
	} from "@/api/login.js"
	export default {
		data() {
			return {
				queryForm: {
					phone: '',
					sms_code: '',
					password: '',
					password_confirmation: ''
				},
				// 验证码参数
				tips: '',
				seconds: 60,
				// 按钮样式
				customStyle: {
					color: '#fff',
					background: "#4286F4"
				},
			}
		},
		methods: {
			// 找回密码
			forgetPWD(){
				if (this.queryForm.phone == '') {
					this.$u.toast('请输入手机号');
					return
				}
				if (this.queryForm.sms_code == '') {
					this.$u.toast('请输入验证码');
					return
				}
				if (this.queryForm.password == '') {
					this.$u.toast('请输入登录密码');
					return
				}
				if (this.queryForm.password != this.queryForm.password_confirmation) {
					this.$u.toast('两次密码不相同');
					return
				}
				forgetPWD(this.queryForm).then(res=>{
					this.$u.toast('找回成功');
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/login/login'
						})
					}, 1000)
				})
			},
			// 获取验证码
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					let queryForm = {
						phone: this.queryForm.phone,
						use_type: 2
					}
					getCode(queryForm).then(res => {
						uni.hideLoading();
						this.$u.toast('验证码已发送');
						this.$refs.uCode.start();
					})

				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			end() {},
			start() {},
			// 验证码改变
			codeChange(text) {
				this.tips = text;
			},
			// 去登录
			gotoLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-field {
		padding: 20rpx 10rpx !important;
		width: 100%;
	}

	/deep/ .u-field__input-wrap {
		letter-spacing: 4rpx;
	}

	.line {
		background-color: #F6F8F9;
		width: 100%;
		height: 16rpx;
	}

	.forget-mian {
		padding: 30rpx;
		background-color: #fff;

		.form-item {
			margin-bottom: 20rpx;
			// display: flex;

			.input-icon {
				width: 26rpx;
				height: 30rpx;
				margin: auto 10rpx;
			}
		}

		.submit-btn {
			margin-top: 150rpx;
		}

		.go-login {
			margin-top: 80rpx;
			font-size: 26rpx;
			color: #999999;
			text-align: center;
		}
	}
</style>